---
title: Instalando un plugin de Vite o Rollup
description: Aprende como puedes importar datos en YAML añadiendo un plugin de Rollup en tu proyecto.
i18nReady: true
type: recipe
---

import PackageManagerTabs from '~/components/tabs/PackageManagerTabs.astro'

Astro esta construido sobre Vite, y soporta plugins de Vite y Rollup. Esta receta usa un plugin de Rollup para añadir la habilidad de importar un archivo YAML (`.yml`) en Astro.

## Receta

1. Instala `@rollup/plugin-yaml`:

    <PackageManagerTabs>
        <Fragment slot="npm">
        ```shell
        npm install @rollup/plugin-yaml --save-dev
        ```
        </Fragment>
        <Fragment slot="pnpm">
        ```shell
        pnpm add @rollup/plugin-yaml --save-dev
        ```
        </Fragment>
        <Fragment slot="yarn">
        ```shell
        yarn add @rollup/plugin-yaml --save-dev
        ```
        </Fragment>
    </PackageManagerTabs>

2. Importa el plugin en tu `astro.config.mjs` y añade el arreglo de plugins de Vite:

    ```js title="astro.config.mjs" ins={2,5-7}
    import { defineConfig } from 'astro/config';
    import yaml from '@rollup/plugin-yaml';

    export default defineConfig({
      vite: {
        plugins: [yaml()]
      }
    });
    ```


3. Por último, puedes añadir datos YAML usando una declaración `import`:

    ```js
    import yml from './data.yml';
    ```

    :::note
    Ahora que puedes importar datos YAML en tu proyecto de Astro, tu editor no va a añadir tipos para los datos importados. Para añadir tipos, crea o encuentra un archivo existente `*.d.ts` en la carpeta `src` de tu proyecto y añade lo siguiente:
    ```ts title="src/files.d.ts"
    // Especifica la extensión del archivo que quieres importar
    declare module "*.yml" {
      const value: any; // Agrega las definiciones de tipos aquí si así lo deseas.
      export default value;
    }
    ```
    Esto va permitir a tu editor sugerir pistas para tus tipos en tus datos YAML.
    :::
